<template>
  <div class="user-home-layout">
    <!-- 使用新的导航栏 -->
    <UserHomeHeader />

    <div class="user-home">
      <!-- 顶部横幅 -->
      <section class="hero-section">
        <div class="hero-content">
          <div class="hero-text">
            <h1>面向东盟的多语言文本对齐系统</h1>
            <p class="hero-subtitle">专业的多语言文本处理平台，为中国-东盟合作提供智能化语言服务</p>
            <div class="hero-buttons">
              <el-button color="var(--primary)" type="primary" size="large" @click="$router.push('/align')">
                开始使用
              </el-button>
              <el-button size="large" @click="scrollToFeatures">
                功能演示
              </el-button>
            </div>
          </div>
          <div class="hero-image">
            <img src="/logo_02.png" alt="系统Logo" />
          </div>
        </div>
      </section>

      <!-- 系统核心功能 -->
      <section class="features-section">
        <div class="section-header">
          <h2>系统核心功能</h2>
          <p>提供全方位的多语言文本处理解决方案</p>
        </div>
        <div class="features-flex">
          <div class="feature-card" @click="$router.push('/align')">
            <div class="feature-icon">
              <el-icon><Operation /></el-icon>
            </div>
            <h3>文本对齐</h3>
            <p>智能化的多语言文本对齐技术，精准匹配句子级别的对应关系</p>
            <el-button type="text" class="feature-link">了解更多 →</el-button>
          </div>

          <div class="feature-card" @click="$router.push('/preprocess')">
            <div class="feature-icon">
              <el-icon><SetUp /></el-icon>
            </div>
            <h3>数据清洗</h3>
            <p>全面的数据预处理功能，提升文本质量和处理效率</p>
            <el-button type="text" class="feature-link">了解更多 →</el-button>
          </div>

          <div class="feature-card" @click="$router.push('/retrieve')">
            <div class="feature-icon">
              <el-icon><Search /></el-icon>
            </div>
            <h3>数据检索</h3>
            <p>高效的文本检索引擎，快速定位所需的多语言内容</p>
            <el-button type="text" class="feature-link">了解更多 →</el-button>
          </div>

          <div class="feature-card" @click="$router.push('/llmprocess')">
            <div class="feature-icon">
              <el-icon><ChatDotRound /></el-icon>
            </div>
            <h3>LLM模型对话</h3>
            <p>基于大语言模型的智能对话系统，支持多语言交互</p>
            <el-button type="text" class="feature-link">了解更多 →</el-button>
          </div>
        </div>
      </section>

      <!-- 功能演示 -->
      <section ref="featuresSection" class="demo-section">
        <div class="section-header">
          <h2>功能演示</h2>
          <p>体验系统的强大功能和易用性</p>
        </div>
        <div class="demo-tabs">
          <el-tabs v-model="activeDemo" type="card" @tab-click="handleDemoChange">
            <el-tab-pane label="文本对齐" name="align">
              <div class="demo-content">
                <div class="demo-image">
                  <div class="demo-placeholder">
                    <el-icon class="placeholder-icon"><Operation /></el-icon>
                    <span>文本对齐演示界面</span>
                  </div>
                </div>
                <div class="demo-text">
                  <h3>智能文本对齐</h3>
                  <p>采用先进的自然语言处理技术，实现中文与东盟国家语言的精准对齐。支持批量处理，自动识别语言特征，确保对齐结果的准确性和一致性。</p>
                  <ul>
                    <li>支持多种东盟语言对齐</li>
                    <li>高精度句子级别匹配</li>
                    <li>批量处理能力</li>
                    <li>可视化对齐结果</li>
                  </ul>
                  <el-button color="var(--primary)" type="primary" @click="$router.push('/align')">立即体验</el-button>
                </div>
              </div>
            </el-tab-pane>

            <el-tab-pane label="数据清洗" name="preprocess">
              <div class="demo-content">
                <div class="demo-image">
                  <div class="demo-placeholder">
                    <el-icon class="placeholder-icon"><SetUp /></el-icon>
                    <span>数据清洗演示界面</span>
                  </div>
                </div>
                <div class="demo-text">
                  <h3>高效数据清洗</h3>
                  <p>提供全面的文本预处理功能，包括去重、格式化、编码转换等。有效提升数据质量，为后续处理奠定坚实基础。</p>
                  <ul>
                    <li>智能去重算法</li>
                    <li>多格式支持</li>
                    <li>编码自动识别</li>
                    <li>质量评估指标</li>
                  </ul>
                  <el-button color="var(--primary)" type="primary" @click="$router.push('/preprocess')">立即体验</el-button>
                </div>
              </div>
            </el-tab-pane>

            <el-tab-pane label="数据检索" name="retrieve">
              <div class="demo-content">
                <div class="demo-image">
                  <div class="demo-placeholder">
                    <el-icon class="placeholder-icon"><Search /></el-icon>
                    <span>数据检索演示界面</span>
                  </div>
                </div>
                <div class="demo-text">
                  <h3>快速数据检索</h3>
                  <p>基于先进的索引技术，实现毫秒级文本检索。支持多语言查询，智能匹配相关内容，快速定位所需信息。</p>
                  <ul>
                    <li>多语言查询支持</li>
                    <li>智能相关度排序</li>
                    <li>高亮显示匹配内容</li>
                    <li>导出检索结果</li>
                  </ul>
                  <el-button color="var(--primary)" type="primary" @click="$router.push('/retrieve')">立即体验</el-button>
                </div>
              </div>
            </el-tab-pane>

            <el-tab-pane label="LLM对话" name="llm">
              <div class="demo-content">
                <div class="demo-image">
                  <div class="demo-placeholder">
                    <el-icon class="placeholder-icon"><ChatDotRound /></el-icon>
                    <span>LLM对话演示界面</span>
                  </div>
                </div>
                <div class="demo-text">
                  <h3>智能LLM对话</h3>
                  <p>集成先进的大语言模型，提供自然流畅的多语言对话体验。支持文本翻译、内容生成、智能问答等功能。</p>
                  <ul>
                    <li>多语言对话支持</li>
                    <li>上下文理解</li>
                    <li>专业领域知识</li>
                    <li>实时响应</li>
                  </ul>
                  <el-button color="var(--primary)" type="primary" @click="$router.push('/llmprocess')">立即体验</el-button>
                </div>
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
      </section>

      <!-- 统计数据 -->
      <section class="stats-section">
        <div class="stats-grid">
          <div class="stat-item">
            <div class="stat-number">{{ stats.totalAlignments }}</div>
            <div class="stat-label">文本对齐次数</div>
          </div>
          <div class="stat-item">
            <div class="stat-number">{{ stats.totalProcessings }}</div>
            <div class="stat-label">数据处理量</div>
          </div>
          <div class="stat-item">
            <div class="stat-number">{{ stats.totalQueries }}</div>
            <div class="stat-label">检索查询次数</div>
          </div>
          <div class="stat-item">
            <div class="stat-number">{{ stats.activeUsers }}</div>
            <div class="stat-label">活跃用户数</div>
          </div>
        </div>
      </section>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { Operation, SetUp, Search, ChatDotRound } from '@element-plus/icons-vue'
import UserHomeHeader from '@/components/UserHomeHeader.vue'

const activeDemo = ref('align')
const featuresSection = ref(null)

const stats = ref({
  totalAlignments: 12580,
  totalProcessings: 34620,
  totalQueries: 8940,
  activeUsers: 1280
})

const scrollToFeatures = () => {
  featuresSection.value?.scrollIntoView({ behavior: 'smooth' })
}

const handleDemoChange = (tab) => {
  // 可以在这里添加切换演示内容时的逻辑
  console.log('切换到演示:', tab.props.name)
}

onMounted(() => {
  // 可以在这里加载统计数据
})
</script>

<style scoped>
.user-home-layout {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.user-home {
  flex: 1;
  padding-top: 70px; /* 为固定导航栏预留空间 */
}

/* 顶部横幅样式 */
.hero-section {
  background: linear-gradient(135deg, var(--primary-light) 0%, var(--bg-card) 100%);
  padding: 80px 20px;
  margin-bottom: 60px;
}

.hero-content {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}

.hero-text h1 {
  font-size: 3rem;
  font-weight: 700;
  color: var(--primary-strong);
  margin-bottom: 20px;
  line-height: 1.2;
}

.hero-subtitle {
  font-size: 1.25rem;
  color: var(--text-secondary);
  margin-bottom: 40px;
  line-height: 1.6;
}

.hero-buttons {
  display: flex;
  gap: 20px;
}

.hero-image {
  display: flex;
  justify-content: center;
  align-items: center;
}

.hero-image img {
  max-width: 100%;
  height: auto;
  max-height: 300px;
  object-fit: contain;
  animation: float 3s ease-in-out infinite;
}

@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-20px); }
}

/* 功能模块样式 */
.features-section {
  padding: 80px 20px;
  background: var(--bg-card);
}

.section-header {
  text-align: center;
  margin-bottom: 60px;
}

.section-header h2 {
  font-size: 2.5rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 15px;
}

.section-header p {
  font-size: 1.1rem;
  color: var(--text-secondary);
}

.features-flex {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 30px;
}

.feature-card {
  flex: 1;
  background: var(--bg-page);
  padding: 40px 30px;
  border-radius: 16px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 1px solid var(--border);
}

.feature-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 40px rgba(139, 92, 246, 0.15);
  border-color: var(--primary);
}

.feature-icon {
  width: 70px;
  height: 70px;
  background: var(--primary-light);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  font-size: 30px;
  color: var(--primary-strong);
}

.feature-card h3 {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 15px;
}

.feature-card p {
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 20px;
}

.feature-link {
  color: var(--primary);
  font-weight: 500;
  padding: 8px 16px;
  border-radius: 6px;
  transition: all 0.3s ease;
}

.feature-link:hover {
  background: var(--primary-light);
}

/* 功能演示样式 */
.demo-section {
  padding: 80px 20px;
  background: var(--bg-page);
}

.demo-tabs {
  max-width: 1200px;
  margin: 0 auto;
}

.demo-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
  padding: 40px 0;
}

.demo-image {
  display: flex;
  justify-content: center;
}

.demo-image img {
  max-width: 100%;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.demo-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 250px;
  background: var(--primary-light);
  border-radius: 12px;
  border: 2px dashed var(--primary);
  color: var(--primary-strong);
  transition: all 0.3s ease;
}

.demo-placeholder:hover {
  background: var(--bg-card);
  border-color: var(--primary-strong);
}

.placeholder-icon {
  font-size: 48px;
  margin-bottom: 15px;
}

.demo-placeholder span {
  font-size: 16px;
  font-weight: 500;
}

.demo-text h3 {
  font-size: 2rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 20px;
}

.demo-text p {
  font-size: 1.1rem;
  color: var(--text-secondary);
  line-height: 1.7;
  margin-bottom: 30px;
}

.demo-text ul {
  list-style: none;
  padding: 0;
  margin-bottom: 30px;
}

.demo-text li {
  padding: 10px 0;
  color: var(--text-secondary);
  position: relative;
  padding-left: 25px;
}

.demo-text li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--primary);
  font-weight: bold;
}

/* 统计数据样式 */
.stats-section {
  padding: 60px 20px;
  background: var(--primary);
  color: white;
}

.stats-grid {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 40px;
}

.stat-item {
  text-align: center;
}

.stat-number {
  font-size: 3rem;
  font-weight: 700;
  margin-bottom: 10px;
}

.stat-label {
  font-size: 1.1rem;
  opacity: 0.9;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .user-home {
    padding-top: 60px; /* 移动端导航栏高度 */
  }

  .hero-content {
    grid-template-columns: 1fr;
    gap: 40px;
    text-align: center;
  }

  .hero-text h1 {
    font-size: 2rem;
  }

  .hero-buttons {
    justify-content: center;
  }

  .demo-content {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
  }

  .stat-number {
    font-size: 2rem;
  }
}

@media (max-width: 480px) {
  .features-flex {
    grid-template-columns: 1fr;
  }

  .stats-grid {
    grid-template-columns: 1fr;
  }
}
</style>